<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        body {
            width: 350px;
            padding: 16px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f8f9fa;
        }

        .container {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .header {
            text-align: center;
            margin-bottom: 8px;
        }

        .title {
            font-size: 18px;
            font-weight: bold;
            color: #1890ff;
            margin: 0;
        }

        .subtitle {
            font-size: 12px;
            color: #666;
            margin: 4px 0 0 0;
        }

        .status-card {
            background: white;
            border-radius: 8px;
            padding: 12px;
            border: 1px solid #e8e8e8;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .status-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 8px;
            color: #333;
        }

        .status-item {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            margin-bottom: 4px;
        }

        .status-value {
            font-weight: 600;
            color: #1890ff;
        }

        .button-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .btn {
            padding: 10px 16px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .btn-primary {
            background: #1890ff;
            color: white;
        }

        .btn-primary:hover {
            background: #096dd9;
            transform: translateY(-1px);
        }

        .btn-primary:disabled {
            background: #bae7ff;
            cursor: not-allowed;
            transform: none;
        }

        .btn-secondary {
            background: #52c41a;
            color: white;
        }

        .btn-secondary:hover {
            background: #389e0d;
        }

        .btn-danger {
            background: #ff4d4f;
            color: white;
        }

        .progress-container {
            margin-top: 12px;
        }

        .progress-bar {
            width: 100%;
            height: 6px;
            background: #f0f0f0;
            border-radius: 3px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: #1890ff;
            transition: width 0.3s ease;
            width: 0%;
        }

        .progress-text {
            font-size: 11px;
            color: #666;
            text-align: center;
            margin-top: 4px;
        }

        .log-container {
            max-height: 120px;
            overflow-y: auto;
            background: #fafafa;
            border-radius: 4px;
            padding: 8px;
            font-size: 11px;
            line-height: 1.4;
        }

        .log-entry {
            margin-bottom: 2px;
            padding: 2px 4px;
            border-radius: 2px;
        }

        .log-success {
            color: #52c41a;
            background: #f6ffed;
        }

        .log-error {
            color: #ff4d4f;
            background: #fff2f0;
        }

        .log-info {
            color: #1890ff;
            background: #f0f8ff;
        }

        .settings-section {
            border-top: 1px solid #e8e8e8;
            padding-top: 12px;
            margin-top: 8px;
        }

        .setting-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
            font-size: 12px;
        }

        .checkbox {
            width: 16px;
            height: 16px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h1 class="title">🚚 物流面单导出</h1>
        <p class="subtitle">批量打印面单并导出Excel,PDF</p>
    </div>

    <div class="status-card">
        <div class="status-title">当前状态</div>
        <div class="status-item">
            <span>运单数量:</span>
            <span id="waybillCount" class="status-value">-</span>
        </div>
        <div class="status-item">
            <span>可打印:</span>
            <span id="printableCount" class="status-value">-</span>
        </div>
        <div class="status-item">
            <span>页面状态:</span>
            <span id="pageStatus" class="status-value">检测中...</span>
        </div>
    </div>

    <div class="button-group">
        <button id="exportBtn" class="btn btn-primary">
            <span>📊 批量导出Excel+PDF</span>
        </button>

        <button id="statusBtn" class="btn btn-secondary">
            <span>🔍 刷新状态</span>
        </button>

        <button id="stopBtn" class="btn btn-danger" style="display: none;">
            <span>⏹️ 停止处理</span>
        </button>
    </div>

    <div class="progress-container" style="display: none;" id="progressContainer">
        <div class="progress-bar">
            <div class="progress-fill" id="progressFill"></div>
        </div>
        <div class="progress-text" id="progressText">准备开始...</div>
    </div>


    <div class="settings-section">
        <div class="status-title">设置选项</div>
        <div class="setting-item">
            <span>自动取消装箱单</span>
            <input type="checkbox" id="autoUncheckPacking" class="checkbox" checked>
        </div>
        <div class="setting-item">
            <span>处理间隔(秒)</span>
            <input type="number" id="processDelay" value="3" min="1" max="10" style="width: 50px; padding: 2px;">
        </div>
        <div class="setting-item">
            <span>PDF命名方式</span>
            <select id="pdfNaming" style="width: 120px; padding: 2px;">
                <option value="waybill">运单号</option>
                <option value="order">订单号</option>
            </select>
        </div>
    </div>
    <div class="status-card">
        <div class="status-title">处理日志</div>
        <div class="log-container" id="logContainer">
            <div class="log-entry log-info">扩展已加载，等待操作...</div>
        </div>
    </div>
</div>

<script src="popup.js"></script>
</body>
</html>
